<script setup lang="ts">
import { ref } from 'vue';

// import LessonBg from '#/assets/lesson-bar.png';
const LessonBg = ''
const bgImage = ref('');
bgImage.value = '';

interface Step {
  number: number;
  title: string;
  description?: string;
}
const steps = [
  { number: 1, title: '购买认证' },
  { number: 2, title: '在线学习', description: '共3小节' },
  { number: 3, title: '理论考试', description: '在线考试，1次考试机会' },
  { number: 4, title: '获取证书', description: '证书2年有效期' },
];
</script>
<template>
  <div
    class="bar flex h-[500px] flex-col justify-center bg-cover bg-center pl-[100px] text-[#fff]"
    :style="{ backgroundImage: `url(${LessonBg})` }"
  >
    <p>Universal Digital Technology Certification</p>
    <p class="pb-[50px] text-[35px] font-[600]">
      通用数字主线技术入门级专项认证
    </p>
    <p class="leading-[20px]">
      聚焦“工业数据管理基础能力”，覆盖数据管理概念及基础知识、架构设计(4A方法论)、关键<br>业务场景及规则、数字主线技术(数据全生命周期支撑)，为企业/个人筑牢数据管理根基。
    </p>
  </div>
  <div class="container overflow-hidden bg-[#fff] px-[50px] mt-[30px]">
    <div class="flex h-[120px] items-center">
      <template
        v-for="(step, index) in steps"
        :key="index"
        class="flex items-center"
      >
        <div class="relative flex items-center">
          <div
            class="flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 text-white"
          >
            {{ step.number }}
          </div>
          <p class="pl-[10px] text-sm font-bold">{{ step.title }}</p>
          <p
            v-if="step.description"
            class="absolute left-[36px] top-[35px] block min-w-[200px] text-[14px] text-gray-600"
          >
            {{ step.description }}
          </p>
        </div>
        <!-- 连线 -->
        <div
          v-if="index != steps.length - 1"
          class="h-[1px] flex-auto bg-[#f0f0f4]"
        ></div>
      </template>
    </div>
  </div>
</template>
